<template>
    <el-row style="width: 100%">
        <el-row :gutter="20">
            <el-col :md="24" :lg="24" v-if="showName">
                <section class="wt-header" style="padding:0">
                    <a><h3>{{info.patientName}}</h3></a><span>{{patientGender}}</span><span>出生日期：{{patientBirthday}}</span><span>病案号：{{info.patientId}}</span>
                    <el-tag
                            type="primary"
                            v-for="tag in info.caseName"
                            :key="tag"
                    >{{tag}}</el-tag>
                    <div class="rightButtons" v-if="true">
                        <el-button
                                @click="editCase"
                                icon="edit">修改患者基本信息</el-button>
                        <el-button icon="plus" @click="newpatient">新建患者病例</el-button>
                    </div>
                </section>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="11"  v-if="!showName" style="height: auto">
                <wt-keyword-selector
                        style="width: 100%;float: left;margin-bottom: 10px"
                        v-model="input"
                        ref = 'select'
                ></wt-keyword-selector>
            </el-col>
            <el-col v-if="allowEdit && !showName" :xs="12" :sm="12" :md="12" :lg="6" class="button-div">
                <el-button style="float: right;" type="primary" icon="plus" @click="newpatient">新建患者病例</el-button>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="6"  v-if="!showName">
                <el-radio-group v-model="extraParam.mine" @change="cut">
                    <el-radio-button label="0">全部</el-radio-button>
                    <el-radio-button label="1">我的</el-radio-button>
                </el-radio-group>
            </el-col>
        </el-row>
            <wt-paged-table ref="table" v-loading="cutting" :url="urls" :transfer="transfer" 
			:url-method="method"
			:filter-param="filtername" :filter="classify"  :initial-page="page" :total-size="currenttotal" :page-size="currentPageSize" :extra-params="extraParam" @page-loaded="onPageLoaded">
                <wt-case-table :list="pageData" :show-name="showName">
                </wt-case-table>
            </wt-paged-table>
    </el-row>
</template>
<script>
    import Vue from 'vue'
    import WtPagedTable from '../../../Resources/components/wt-paged-table'
    import gender from '../../../Resources/utils/wt-form-utils'
    import ElementUI from 'element-ui'
    import WtCaseTable from "./case-table"
    import AutoComplete from '../components/wt-keyword-selector'
    import request from 'winged/utils/axios'
	import Permission from 'winged/utils/wt-permission';
    import Routes from '../js/routes';
    import DateFormat from '../../../Resources/utils/wt-time-utils'
    Vue.use(ElementUI);
    Vue.component(WtPagedTable.name, WtPagedTable);
    Vue.component(WtCaseTable.name, WtCaseTable);
    Vue.component(AutoComplete.name, AutoComplete);

    export default {
        components: {WtCaseTable},
        name: 'wt-case-list',
        props:{
            list: {
                type: Array,
                required: true
            },
            page: {
                type: Number,
                default: 0
            },
            total: {
                type: Number,
                required: true
            },
            pageSize: {
                type: Number,
                required: true
            },
            // 用于请求查询的额外参数数据，通常是_token
            extraParams: {
                type: Object,
                default: {}
            },
            info:{
                type: Object,
                default: function() {
                    return {};
                }
            },
            showName:{
                type: Boolean,
                default: false
            },
            filter:{
                type: String,
                default: ''
            },
            filterParam: {
                type: String,
                default: ''
            },
            multiSelect: {
                type: Boolean,
                default: true
            },
            url:{
                type:String,
                default:'patients/case'
            },
        },
        data() {
            return {
                // 当前页的列表数据
                pageData: this.list,
                filtername:this.filterParam,
                classify:this.filter,
                currenttotal:this.total,
                urls:this.url,
				method: 'POST',
                search:false,
                cutting:false,
                input:null,
                transfer:false,
                extraParam:{
                    mine:0,
                    case_id:this.info.patientCaseId
                },
                allowEdit: Permission.checkPermission('patient-case-add'),
                allowRemove: Permission.checkPermission('patient-case-delete')
            };
        },
        watch:{
            input(val) {
                if (val != ''){
                    this.classify = val;
                    this.urls = 'doctor/patient/case/search';
					this.method = 'GET';
                    this.transfer = true;
                    this.search = true;
                }else {
                    this.classify = val;
                    if (this.extraParam.mine == 1){
						this.urls = 'patients/show';
                    }else {
						this.urls = 'patients/case';
                    }
					this.method = 'POST';
                    this.transfer = false;
                    this.search = false;
                }
            }
        },
		computed: {
			currentPageSize: function() {
				return this.pageData.length > this.pageSize ? this.pageData.length : this.pageSize;
			},
            patientGender: function() {
                return gender.formatGender(this.info.patientGender);
            },
            patientBirthday: function() {
			    var d = new Date(this.info.patientBirthday)
                return DateFormat.format(d,'date')
            }
		},
        mounted () {
            if (this.showName){
                this.filtername='patient_id'
            }
            else {
                this.filtername='key'
            }
        },
        methods: {
            onPageLoaded: function(data) {
                if (this.search){
                    this.pageData = data.cases;
                    this.currenttotal = data.count
                }else {
                    this.pageData = data;
                }

            },
            newpatient:function () {
                if (!this.showName){
                    window.location.href=`/admin/patients/case/create`
                }else {
                    window.location.href=`/admin/patients/case/create/${this.info.patientId}`
                }

            },
            cut:function(){
                this.$refs.table.load();
            },
            editCase() {
                window.location = Routes.patientEdit(this.info.patientCaseId);
            },
        },
        filters: {
            showsix: function (value) {
                return gender.formatGender(value);
            }
        }
    }
</script>
<style scoped>
    .button-div{
        padding-bottom: 15px;
        float:right;
    }
    .caseid{
        color: #999;
        float: left;
        margin-top:10px;
        line-height:21px;
        margin-left: 5px;
    }
    .table{
        width: 65%;
    }
    .table th{
        width: 30%;
        text-align: left;
    }
    .table td{
        width: 30%;
        text-align: left;
    }
    .basic{
        width: 100%;
        height: 40px;
        line-height: 40px;
        margin-bottom: 10px;
    }
    .six{
        margin-right: 2em;
    }
    .wt-header{
        width:100%;
        display:block;
        margin: 0 0 10px 0;
    }
    .wt-header>*{
        display:inline-block;
        vertical-align:middle;
        margin:4px 0 4px 0;

    }
    .wt-header h3 {
        margin:0;
    }
    .wt-header span {
        margin-left: 10px;
    }
    .rightButtons {
        float: right;
        margin-top:0;
    }
</style>